<template>
  <view class="user-page">
    <image class="bg-linear-gradient" :src="OSSImgUrl(`bg-linear-gradient.png`)" mode="aspectFill" />

    <view class="user-info-wrapper">
      <view class="avatar-img">
        <image src="@/static/default/avatar.png" mode="widthFix" />
      </view>
      <view class="user-content">
        <view class="title">抖音用户</view>
        <view class="tip">ID：{{uuid}}</view>
      </view>
    </view>

    <view class="vip-wrapper" v-if="isShow">
      <view class="gold-wrapper">
        <view class="gold-title">金币余额</view>
        <view class="gold">
          <image class="icon" :src="OSSImgUrl(`gold-icon.png`)" mode="widthFix" />
          <view class="txt">{{ balance || 0 }}</view>
        </view>
      </view>

      <view class="action"  @click="handlePopup">
        <image :src="OSSImgUrl(`get-goold-btn.png`)" mode="widthFix" />
      </view>
    </view>

    <view class="action-wrapper">
      <view class="action-item"
            v-for="(item, index) of actionData" :key="index"
            @click="() => handleActionClick(item)"
      >
        <template v-if="item.type === 'lianxi'">
          <button
              slot="value"
              open-type="im"
              :data-im-id="imId"
              class="im-btn"
              @im="ImBtnCallback"
              @error="ImBtnError"
          >
            <view class="title">
              <image class="icon" :src="OSSImgUrl(item.icon)" mode="widthFix" />
              <view class="txt">{{ item.title }}</view>
            </view>
            <view class="more">
              {{ item.more }}
              <image class="icon" :src="OSSImgUrl(`icon_arrow.png`)" mode="widthFix" />
            </view>
          </button>
        </template>

        <template v-else>
          <view class="title">
            <image class="icon" :src="OSSImgUrl(item.icon)" mode="widthFix" />
            <view class="txt">{{ item.title }}</view>
          </view>
          <view class="more">
            {{ item.more }}
            <image class="icon" :src="OSSImgUrl(`icon_arrow.png`)" mode="widthFix" />
          </view>
        </template>
      </view>
    </view>

    <PayPopup :showPopup.sync="showPopup" page="user" @paySuccess="paySuccess">
    </PayPopup>
  </view>
</template>

<script>
import PayPopup from "@/components/PayPopup/index.vue";
import { getApiBalance } from "@/api/user";
import { isShowPay, OSSImgUrl } from "@/utils";
import dayjs from "dayjs";

export default {
  components: { PayPopup },
  data() {
    return {
      index: 0,
      showPopup: false,
      balance: 0, //钻石余额
      is_examine: null, //审核状态
      is_need_cid: null,
      channel_id: null,
      is_ios_pay: null,
      uuid: null,
      give_balance: 0,
      cid: 0,
      isShow: true,
      version: "",
      vip_time: 0,

      imId: this.$store.state.global.ImId,
      actionData: [
        // {
        //   icon: "every-day-icon.png",
        //   title: "每日签到",
        //   more: "50金币待领取",
        //   type: "qiandao"
        // },
        {
          icon: "zhuiju-icon.png",
          title: "我的追剧",
          more: "更多好剧等你看",
          type: "zhuiju"
        },
        {
          icon: "jiaoyi-icon.png",
          title: "交易记录",
          more: "查询记录",
          type: "jiaoyi"
        },
        {
          icon: "kefu-icon.png",
          title: "联系客服",
          more: "工作日9:00~19:00",
          type: "lianxi"
        },
        {
          icon: "yinsi-icon.png",
          title: "隐私政策",
          more: "更多",
          type: "yinsi"
        },
      ]
    };
  },
  async onShow() {
    // 获取用户余额
    const { balance, give_balance, vip_time } = uni.getStorageSync("balance");
    // 显示总余额
    this.balance = balance + give_balance;
    // 显示赠送余额
    this.give_balance = give_balance;
    this.vip_time = vip_time;
    // 获取uuid
    this.uuid = uni.getStorageSync("userInfo").uuid || 0;
    // 获取审核状态 /是否支持iOS充值
    this.channel_id = uni.getStorageSync("channel_id");
    this.version = this.$store.state.user.defaultParams.version || "";
    this.isShow = isShowPay();
  },
  methods: {
    OSSImgUrl: OSSImgUrl,
    ImBtnCallback(e){
      console.log("跳转IM客服成功", e.detail);
    },
    ImBtnError(e){
      console.log("拉起IM客服失败", e.detail);
    },
    // 1.获取余额
    async getBalance() {
      const eid = uni.getStorageSync("userInfo").eid;
      const {
        data: { balance, give_balance, vip_time },
      } = await getApiBalance(eid);
      // 显示总余额
      this.balance = balance + give_balance;
      // 显示赠送余额
      this.give_balance = give_balance;
      uni.setStorageSync("balance", {
        balance: balance ? balance : 0,
        give_balance: give_balance ? give_balance : 0,
        vip_time: vip_time ? vip_time : 0,
      });
    },
    // 2.打开弹层
    handlePopup() {
      // 判断是弹起充值还是跳转页面
      isShowPay(
          () => {
            this.showPopup = true;
          },
          () => {
            uni.navigateTo({
              url: `/pages_sub1/pay-recharge/index`,
            });
          }
      );
    },
    // 充值成功
    async paySuccess() {
      await this.getBalance();
    },
    // 调起拨打电话
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: "18521870828",
      });
    },
    // 格式化时间
    formatTime(time, type = "YYYY/MM/DD") {
      return dayjs(time).format(type);
    },
    handleActionClick(item){
      switch(item.type){
        case "zhuiju":
          uni.switchTab({ url: "/pages/teleplay/teleplay" });
          break
        case "jiaoyi":
          uni.navigateTo({ url: "/pages_sub2/orderList/index" });
          break
        case "yinsi":
          uni.navigateTo({ url: "/pages_sub2/agreement/index" });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.user-page {
  position: relative;
  height: 100vh;
  box-sizing: border-box;
  padding: 40rpx 40rpx 0px 40rpx;


  .bg-linear-gradient{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 400rpx;
    z-index: -1;
  }

  .user-info-wrapper{
    display: flex;
    align-items: center;

    .avatar-img{
      width: 110rpx;
      height: 110rpx;
      display: flex;

      image {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border-radius: 50%;
        border: 1px solid transparent;
        // background: linear-gradient(white, white) padding-box, 
        // linear-gradient(to bottom, #FFCCA5, #FF7514) border-box;
      }
    }

    .user-content{
      margin-left: 30rpx;

      .title{
        font-size: 36rpx;
        font-weight: 600;
        color: #060000;
      }

      .tip {
        font-family: "HeiTi";
        font-weight: 600;
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #FD7717;
      }
    }
  }

  .vip-wrapper{
    margin-top: 30rpx;
    box-sizing: border-box;
    padding: 30rpx;
    border-radius: 16rpx;
    background: linear-gradient(to right, #FFF1E6 5%, #FED5B5 95%);

    display: flex;
    justify-content: space-between;
    align-items: center;

    .gold-wrapper{

      .gold-title{
        font-size: 30rpx;
        font-weight: 600;
        color: #060000;
      }

      .gold{
        display: flex;
        align-items: center;
        margin-top: 30rpx;
        transform: translateX(-12rpx);

        .icon {
          width: 64rpx;
          height: 64rpx;
        }

        .txt {
          font-size: 36rpx;
          font-weight: 600;
          color: #FD6F09;
        }
      }
    }

    .action{
      display: flex;

      image {
        width: 150rpx;
        height: 74rpx;
      }
    }
  }

  .action-wrapper{
    margin-top: 30rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 30rpx;

    .action-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 30rpx 0;

      // &:not(:last-child){
      //   margin-bottom: 80rpx;
      // }

      .im-btn{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0;
        background: transparent;

        &::after {
          border: 0;
        }
      }

      .title{
        display: flex;
        align-items: center;
        flex: 1;

        .icon {
          width: 40rpx;
          height: 40rpx;
        }

        .txt {
          margin-left: 20rpx;
          font-size: 30rpx;
          color: #020606;
        }
      }

      .more {
        font-size: 26rpx;
        color: #9DA2A2;
        display: flex;
        align-items: center;

        .icon {
          width: 36rpx;
          height: 36rpx;
        }
      }
    }

  }
}


::v-deep {
  .u-cell__body {
    padding: 0 !important;
  }

  .uicon-arrow-right {
    width: 40rpx;
    height: 40rpx;
    margin-left: 5rpx;
  }
}

::v-deep {
  .uicon-phone-fill {
    font-size: 40rpx !important;
  }

  .u-line {
    border-color: #fff !important;
    width: 10rpx !important;
  }
}
</style>
